<template>
	<div>
		<el-form :inline="true" :model="repairQueryForm" size="mini">
			<el-form-item>
				<el-col :span="10">
				  <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="开始日期" v-model="repairQueryForm.startDate" style="width: 150px;"></el-date-picker>
				</el-col>
				<el-col class="line" :span="2">-</el-col>
				<el-col :span="10">
				  <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="结束日期" v-model="repairQueryForm.endDate" style="width: 150px;"></el-date-picker>
				</el-col>
			</el-form-item>
			<el-form-item>
				<el-input v-model="repairQueryForm.customerName" placeholder="客户"></el-input>
			</el-form-item>
		  <el-form-item>
		    <el-input v-model="repairQueryForm.carNum" placeholder="车牌号"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-input v-model="repairQueryForm.carOwner" placeholder="车主"></el-input>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="query">查询</el-button>
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" @click="exportExcelForTravel">导出</el-button>
		  </el-form-item>
		 <el-form-item>
		 	<el-button type="text" @click="dialogVisible = true">导入文件</el-button>
		 </el-form-item>
		 <el-form-item>
		   <el-button type="primary" @click="deleteFunc">批量删除</el-button>
		 </el-form-item>
		 <el-form-item>
		   <el-button type="primary" @click="addFunc">新增</el-button>
		 </el-form-item>
		 
		</el-form>
		
		<!--弹出导入文件的页面-->
		<el-dialog
		  title="上传文件"
		  :visible.sync="dialogVisible"
		  width="30%">
		  
		  <el-upload
		    ref="upload" 
			name="file"
			:headers="uploadExcelHeader"
		    :action="uploadExcelUrl"
		    :file-list="fileList"
			:multiple="false"
			:limit="1"
			:accept="accept"
			:on-success="successFunc"
			:on-error="errorFunc"
		    :auto-upload="false">
		    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
		    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"> {{importDataBtnText}}</el-button>
		    <div slot="tip" class="el-upload__tip">只能上传 EXCEL 格式</div>
		  </el-upload>
		</el-dialog>
		
		
		<!--弹出  新增修改 页面 -->
		<el-dialog
		  :title="operationFormTitle"
		  :visible.sync="dialogOpeFormVisible"
		  width="50%">
		  
		  
		  <el-form  :model="editForm" ref="editForm" :rules="rules"  size="mini">
			  
			  <el-row :gutter="3">
				  <el-col :span="8">
					  <el-form-item label="日期" prop="repairDate">
						  <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="日期" v-model="editForm.repairDate" style="width: 100%;"></el-date-picker>
					  </el-form-item>
				  </el-col>
				  <el-col :span="8">
					  <el-form-item label="客户名" prop="customerName">
						  <el-input v-model="editForm.customerName"></el-input>
					  </el-form-item>
				  </el-col>
				  <el-col span="8">
					  <el-form-item label="车牌号" prop="carNum">
						  <el-input v-model="editForm.carNum"></el-input>
					  </el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="3">
				  <el-col :span="8">
					  <el-form-item label="修理明细">
						  <el-input v-model="editForm.repairDetail"></el-input>
					  </el-form-item>
				  </el-col>
				  <el-col :span="8">
					  <el-form-item label="单价" prop="unitPrice">
						  <el-input type="number" v-model="editForm.unitPrice"></el-input>
					  </el-form-item>
				  </el-col>
				  <el-col :span="8">
					  <el-form-item label="数量" prop="count">
						  <el-input type="number" v-model="editForm.count"></el-input>
					  </el-form-item>
				  </el-col>
			  </el-row>
			  <el-row :gutter="3">
				  <el-col :span="8">
					  <el-form-item label="金额" prop="amount">
						  <el-input type="number" v-model="editForm.amount"></el-input>
					  </el-form-item>
				  </el-col>
				  <el-col :span="8">
					  <el-form-item label="备注">
						  <el-input v-model="editForm.remark"></el-input>
					  </el-form-item>
				  </el-col>
				 <el-col :span="8">
					  <el-form-item label="付款状态">
						  <el-input v-model="editForm.payStatus"></el-input>
					  </el-form-item>
				 </el-col>
			  </el-row> 
			  <el-row :gutter="3">
					  <el-col :span="8">
						  <el-form-item label="发票号码">
							  <el-input v-model="editForm.invoiceNum"></el-input>
						  </el-form-item>
					  </el-col>
					  <el-col :span="8">
						  <el-form-item label="车主" prop="carOwner">
							  <el-input v-model="editForm.carOwner"></el-input>
						  </el-form-item>
					  </el-col>
			  </el-row> 
		    <el-form-item size="mini" style="text-align: center;">
		      <el-button type="primary" @click="submitForSave">保存</el-button>
		      <el-button @click="dialogOpeFormVisible = false">取消</el-button>
		    </el-form-item>
		  </el-form>
		  
		  
		</el-dialog>
		
		
		
		<el-table
			:header-cell-style="{background:'#F5F5F5',color:'#606266'}"
			size='mini' 
		   :data="tableData"
		   :max-height="tableHeight"
		   border
		    @selection-change="handleSelectionChange"
		   style="width: 100%">
		   
		   <el-table-column
		         type="selection"
		         width="55">
		       </el-table-column>
		  <el-table-column
		        fixed="left"
		        label="操作"
		        width="50">
		        <template slot-scope="scope">
		          <el-button @click="editFunc(scope.row)" type="text" size="small">编辑</el-button>
		        </template>
		      </el-table-column>
		   <el-table-column
				   label="序号"
				   width="70px">
			   <template slot-scope="scope">
				   {{scope.$index+1}}
			   </template>
		   </el-table-column>
		   <el-table-column 
			 v-if="false"
		     prop="id"
		     label="index">
		   </el-table-column>
		   <el-table-column  
		     prop="repairDate"
		     label="日期">
		   </el-table-column>
		   <el-table-column
		     prop="customerName"
		     label="客户名">
		   </el-table-column>
		   <el-table-column
		     prop="carNum"
		     label="车牌号">
		   </el-table-column>
		   <el-table-column
		     prop="repairDetail"
			 show-overflow-tooltip
		     label="修理明细">
		   </el-table-column>
		   <el-table-column
		     prop="unitPrice"
		     label="单价">
		   </el-table-column>
		   <el-table-column
		     prop="count"
		     label="数量">
		   </el-table-column>
		   <el-table-column
		     prop="amount"
		     label="金额">
		   </el-table-column>
		   <el-table-column
		     prop="remark"
			 show-overflow-tooltip
		     label="备注">
		   </el-table-column>
		   <el-table-column
		     prop="payStatus"
		     label="付款状态">
		   </el-table-column>
		   <el-table-column
		     prop="invoiceNum"
			 show-overflow-tooltip
		     label="发票号码">
		   </el-table-column>
		   <el-table-column
		     prop="carOwner"
		     label="车主">
		   </el-table-column>
		 </el-table>
		<div class="block">
					 <el-pagination 
					 background
					   @size-change="handleSizeChange"
					   @current-change="handleCurrentChange"
					   @prev-click="handlePrevClick"
					   @next-click="handleNextClick"
					   :page-sizes="[20, 50, 100, 300,500]"
					   :page-size="DEFAULT_PAGE_COUNT"
					   layout="total, sizes, prev, pager, next, jumper"
					   :total="tableDataCount">
					 </el-pagination>
		  </div>
	</div>
</template>

<script>
	import { getToken } from '../../../util/auth.js';
	import request from '../../../api/request.js'
	import { ObjToFormData } from '../../../util/commonUtil.js';
	import {PRE_URL}from '../../../util/constants.js'
	import RoutePaths from '../../../util/constants.js'  //引用模块进来
	
	export default{
		name:RoutePaths.ROUTE_BASE_REPAIR_NAME,
		data() {
		  return {
			repairQueryForm: {
				startDate:'',
				endDate:'',
				customerName: '',
				carNum: '',
				carOwner: ''
			},
			//新增 /修改的 form
			editForm: {
				id:'',
				repairDate:'',
				customerName:'',
				carNum: '',
				repairDetail: '',
				unitPrice: '',
				count: '',
				amount: '',
				remark:'',
				payStatus:'',
				invoiceNum:'',
				carOwner:''
				
			},
			
			//添加/修改 验证规则
			rules:{
				repairDate:[{required:true,message:"必须填写 日期",trigger: 'blur'}],
				customerName:[{required:true,message:"必须填写 客户名称",trigger: 'blur'}],
				carNum:[{required:true,message:"必须填写 车牌号",trigger: 'blur'}],
				unitPrice:[{required:true,message:"必须填写 单价",trigger: 'blur'}],
				count:[{required:true,message:"必须填写 数量",trigger: 'blur'}],
				amount:[{required:true,message:"必须填写 金额",trigger: 'blur'}],
				carOwner:[{required:true,message:"必须填写 车主",trigger: 'blur'}]
			},
			//上传路径
			uploadExcelUrl:PRE_URL+"/api/repair/uploadRepair",
			//显示的文件列表
			fileList:[],
			//上传文件的 头文件
			uploadExcelHeader:{Authorization:getToken()},
			//文件上传状态显示
			importDataBtnText:'点击上传',
			//接收文件类型
			accept:".xls,.xlsx",
			
			dialogVisible:false,
			tableHeight: window.innerHeight - 250,
			tableData: [],
			//显示表格中的总数量
			tableDataCount:0,
			//选中的记录
			tableSelectedIds:[],
			// 新增 或者 修改，默认新增
			operationFormTitle:'新增',
			// 显示/隐藏  编辑 面板
			dialogOpeFormVisible:false
		  }
		},
		mounted () {

		},
		methods:{
			//点击上传文件到服务器
			submitUpload(){
				this.$refs.upload.submit();
			},
			//上传成功的方法
			successFunc(response, file, fileList){
				//清空 文件列表
				this.fileList = [];
				//关闭 上传窗口
				this.dialogVisible = false;
				
				this.commonUtil.showMessage(response.code,response.message);
				
				
			},
			//上传失败的方法
			errorFunc(err, file, fileList){	
				//清空 文件列表
				this.fileList = [];
				//关闭 上传窗口
				this.dialogVisible = false;
				this.commonUtil.showMessage(response.code,response.message);
			},
			exportExcelForTravel(){
				
			},
			query(){
				var form  = ObjToFormData(this.repairQueryForm);
				var me = this;
				
				request.post('/api/repair/listRepair',
					form).then(
					response => {
						const result = response.data;
						const resultCount = response.count;
				
						me.commonUtil.showMessage(response.code,response.message);
						
						//给 数据显示赋值
						this.tableData = result;
						this.tableDataCount = resultCount;
						
					})

			},
			//批量删除
			deleteFunc(){
				let form  = new FormData();
				var me = this;
				
				form.append("tableSelectedIds",this.tableSelectedIds)
				
				
				request.post('/api/repair/deleteRepairs',
					form).then(
					response => {
						me.commonUtil.showMessage(response.code,response.message);
						
						this.query();
						
					})
				
			},
			//单个新增
			addFunc(){
				//清空属性值
				for(let key in this.editForm){
					this.editForm[key]  = ''
				}
				
				this.operationFormTitle = "新增";
				
				//显示
				this.dialogOpeFormVisible = true;
				
				//清空验证项目
				this.$refs["editForm"].clearValidate();
				
			},
			
			//编辑
			editFunc(rowObj){
				//赋值
				for(let key in this.editForm){
					this.editForm[key]  = rowObj[key]
				}
				
				this.operationFormTitle = "修改";
				//显示
				this.dialogOpeFormVisible = true;
				
				//清空验证项目
				this.$refs["editForm"].clearValidate();
			},
			/**
			 * 分页 中选择每页显示条数的时候 触发的方法
			 * */
			handleSizeChange(showCount){
				this.repairQueryForm.pageCount = showCount;
				this.query();
			},
			/**
			 *  页面 改变 时触发的 方法
			 * */
			handleCurrentChange(curPage){
				this.repairQueryForm.startPage = curPage;
				this.query();
			},
			/**
			 *  往前 一页 按钮
			 * */
			 handlePrevClick(curPage){
				 this.repairQueryForm.startPage = curPage;
				 this.query();
			 },
			/**
			 *  往前 一页 按钮
			 * */
			 handleNextClick(curPage){
				 this.repairQueryForm.startPage = curPage;
				 this.query();
			 },
			 /**
			  *  多选 操作
			  * */
			 handleSelectionChange(val){
				 //先清空
				 this.tableSelectedIds = [];
				 val.forEach(item => {
					this.tableSelectedIds.push(item.id);   //把所有的id放进multipleSelection
				 })
			 },
			 /**
			  * 保存 新增或者 修改的值
			  * */
			 submitForSave(){
				 var form  = ObjToFormData(this.editForm);
				 var me = this;
				 
				 //验证
				 this.$refs["editForm"].validate((valid) => {
				  if (valid) {
						 request.post('/api/repair/saveRepairs',
						 	form).then(
						 	response => {
						 		me.commonUtil.showMessage(response.code,response.message);
						 		
						 		this.query();
						 		//隐藏
						 		this.dialogOpeFormVisible = false;
						 		
						 	})
					} else {
						 return false;
				   }
				 });	
				 
				
				 
			 }
		}
		
	}
</script>

<style>
</style>
